<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="area.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        form {
            width: 700px;
            height: 50px;
            background-color: rgba(91, 89, 89, 0.1);
            box-sizing: border-box;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin: 100px auto;
            border-radius: 10px;
        }

        .shadow {
            box-shadow: 0 5px 25px rgb(102, 100, 100);
        }

        select {
            width: 200px;
            height: 30px;
            box-sizing: border-box;
            border-radius: 6px;
        }
    </style>
</head>

<body>
    <!-- 完整版 -->
    <form action="">
        <select name="province" id="province"></select>
        <select name="city" id="city"></select>
        <select name="area" id="area"></select>
    </form>
    <script>
        console.log(place.data);
        //获取省市县的select
        let province = document.querySelector('#province');
        let city = document.querySelector('#city');
        let area = document.querySelector('#area');
        //声明两个全局的索引 用于记录select中显示的是哪个option
        let index = 0;
        let index2 = 0;
        // 首先渲染出河南省郑州中原区 
        for (let i = 0; i < place.data[index].city.length; i++) {
            city.innerHTML += `<option value="">${place.data[index].city[i].cityname}</option>`
        }
        for (let i = 0; i < place.data[index].city[index2].dist.length; i++) {
                area.innerHTML += `<option value="">${place.data[index].city[index2].dist[i]}</option>`
            }
        // 渲染出所有省
        for (let i = 0; i < place.data.length; i++) {
            province.innerHTML += `<option value="">${place.data[i].provname}</option> `
        }
        // 选择的省改变时 获取改变后的索引号 根据索引号index渲染当前省份下的市区
        province.addEventListener('change', function () {
            city.innerHTML = ''; //渲染前清除上一次的渲染内容
            index = province.selectedIndex;
            // console.log(place.data[index].city);
            for (let i = 0; i < place.data[index].city.length; i++) {
                city.innerHTML += `<option value="">${place.data[index].city[i].cityname}</option>`
            }
            area.innerHTML = '<option value="">区县</option>';
        })
        // 选择的市改变时 获取改变后的索引号index2 根据索引号index index2 渲染出区县
        city.addEventListener('change', function () {
            area.innerHTML = '';
            // let index = province.selectedIndex;
            index2 = city.selectedIndex;
            console.log(place.data[index].city[index2].dist.length);
            for (let i = 0; i < place.data[index].city[index2].dist.length; i++) {
                area.innerHTML += `<option value="">${place.data[index].city[index2].dist[i]}</option>`
            }
        })
        let form = document.querySelector('form');
        form.addEventListener('mouseover', function () {
            this.classList.add('shadow');
        })
        form.addEventListener('mouseleave', function () {
            this.classList.remove('shadow');
        })
    </script>
</body>

</html>